<template>
  <div class="leave-process">
    <h3>请假流程管理</h3>
    <div class="process-content">
      <el-card class="process-card">
        <div slot="header">
          <span>请假流程配置</span>
        </div>
        <el-form :model="processConfig" label-width="120px">
          <el-form-item label="审批流程">
            <el-checkbox-group v-model="processConfig.steps">
              <el-checkbox label="直接主管">直接主管审批</el-checkbox>
              <el-checkbox label="部门经理">部门经理审批</el-checkbox>
              <el-checkbox label="人事">人事审批</el-checkbox>
              <el-checkbox label="总经理">总经理审批</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveConfig">保存配置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="process-card">
        <div slot="header">
          <span>请假类型设置</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addLeaveType">
            添加类型
          </el-button>
        </div>
        <el-table :data="leaveTypes" style="width: 100%">
          <el-table-column prop="name" label="假期类型"></el-table-column>
          <el-table-column prop="maxDays" label="最大天数"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="editLeaveType(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteLeaveType(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 添加/编辑请假类型对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form :model="leaveTypeForm" label-width="100px">
        <el-form-item label="假期类型">
          <el-input v-model="leaveTypeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="最大天数">
          <el-input-number v-model="leaveTypeForm.maxDays" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveLeaveType">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      processConfig: {
        steps: ['直接主管', '部门经理', '人事']
      },
      leaveTypes: [
        { id: 1, name: '年假', maxDays: 5 },
        { id: 2, name: '事假', maxDays: 3 },
        { id: 3, name: '病假', maxDays: 15 },
        { id: 4, name: '婚假', maxDays: 3 }
      ],
      dialogVisible: false,
      dialogTitle: '添加请假类型',
      leaveTypeForm: {
        name: '',
        maxDays: 1
      },
      isEdit: false
    }
  },
  methods: {
    saveConfig() {
      this.$message.success('配置保存成功')
    },
    addLeaveType() {
      this.isEdit = false
      this.dialogTitle = '添加请假类型'
      this.leaveTypeForm = {
        name: '',
        maxDays: 1
      }
      this.dialogVisible = true
    },
    editLeaveType(row) {
      this.isEdit = true
      this.dialogTitle = '编辑请假类型'
      this.leaveTypeForm = { ...row }
      this.dialogVisible = true
    },
    deleteLeaveType(row) {
      this.$confirm('确认删除该请假类型吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.leaveTypes = this.leaveTypes.filter(item => item.id !== row.id)
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    saveLeaveType() {
      if (!this.leaveTypeForm.name) {
        this.$message.error('请输入假期类型名称')
        return
      }
      if (this.isEdit) {
        const index = this.leaveTypes.findIndex(item => item.id === this.leaveTypeForm.id)
        this.leaveTypes[index] = { ...this.leaveTypeForm }
      } else {
        const id = Math.max(...this.leaveTypes.map(item => item.id)) + 1
        this.leaveTypes.push({
          id,
          ...this.leaveTypeForm
        })
      }
      this.dialogVisible = false
      this.$message.success(this.isEdit ? '编辑成功' : '添加成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.leave-process {
  .process-content {
    margin-top: 20px;
  }
  .process-card {
    margin-bottom: 20px;
  }
}
</style> 